<!DOCTYPE html>
<html lang="zh-CN">
<head>
	<meta charset="UTF-8">
	<title>企动客服知识库</title>
    <link type="text/css" href="css/reset.css" rel="stylesheet"/> 
    <link type="text/css" href="css/style.css" rel="stylesheet"/> 
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link rel="stylesheet" href="js/skin/default/layer.css">
    <link rel="stylesheet" href="css/metroStyle.css" type="text/css">
    <script src="js/jquery.min.js"></script>
    <script src="js/layer.js"></script>
    <script src="js/common.js"></script>
    <script language="javascript" type="text/javascript" src="My97DatePicker/WdatePicker.js"></script>
    <script type="text/javascript" src="js/jquery.ztree.core.js"></script>
    <script type="text/javascript" src="js/jquery.ztree.excheck.js"></script>
    <script type="text/javascript" src="js/jquery.ztree.exedit.js"></script>
    <SCRIPT type="text/javascript">
        <!--
        var setting = {
            view: {
                addHoverDom: addHoverDom,
                removeHoverDom: removeHoverDom,
                selectedMulti: false
            },
            check: {
                enable: true
            },
            data: {
                simpleData: {
                    enable: true
                }
            },
            edit: {
                enable: true
            }
        };

        var zNodes =[
            { id:1, pId:0, name:"父节点1", open:true},
            { id:11, pId:1, name:"父节点11"},
            { id:111, pId:11, name:"叶子节点111"},
            { id:112, pId:11, name:"叶子节点112"},
            { id:113, pId:11, name:"叶子节点113"},
            { id:114, pId:11, name:"叶子节点114"},
            { id:12, pId:1, name:"父节点12"},
            { id:121, pId:12, name:"叶子节点121"},
            { id:122, pId:12, name:"叶子节点122"},
            { id:123, pId:12, name:"叶子节点123"},
            { id:124, pId:12, name:"叶子节点124"},
            { id:13, pId:1, name:"父节点13", isParent:true},
            { id:2, pId:0, name:"父节点2"},
            { id:21, pId:2, name:"父节点21", open:true},
            { id:211, pId:21, name:"叶子节点211"},
            { id:212, pId:21, name:"叶子节点212"},
            { id:213, pId:21, name:"叶子节点213"},
            { id:214, pId:21, name:"叶子节点214"},
            { id:22, pId:2, name:"父节点22"},
            { id:221, pId:22, name:"叶子节点221"},
            { id:222, pId:22, name:"叶子节点222"},
            { id:223, pId:22, name:"叶子节点223"},
            { id:224, pId:22, name:"叶子节点224"},
            { id:23, pId:2, name:"父节点23"},
            { id:231, pId:23, name:"叶子节点231"},
            { id:232, pId:23, name:"叶子节点232"},
            { id:233, pId:23, name:"叶子节点233"},
            { id:234, pId:23, name:"叶子节点234"},
            { id:3, pId:0, name:"父节点3", isParent:true}
        ];

        $(document).ready(function(){
            $.fn.zTree.init($("#treeDemo"), setting, zNodes);
        });

        var newCount = 1;
        function addHoverDom(treeId, treeNode) {
            var sObj = $("#" + treeNode.tId + "_span");
            if (treeNode.editNameFlag || $("#addBtn_"+treeNode.tId).length>0) return;
            var addStr = "<span class='button add' id='addBtn_" + treeNode.tId
                + "' title='add node' onfocus='this.blur();'></span>";
            sObj.after(addStr);
            var btn = $("#addBtn_"+treeNode.tId);
            if (btn) btn.bind("click", function(){
                var zTree = $.fn.zTree.getZTreeObj("treeDemo");
                zTree.addNodes(treeNode, {id:(100 + newCount), pId:treeNode.id, name:"new node" + (newCount++)});
                return false;
            });
        };
        function removeHoverDom(treeId, treeNode) {
            $("#addBtn_"+treeNode.tId).unbind().remove();
        };
        //-->
    </SCRIPT>
</head>
<body>
    <!-- 头部 -->
    <div class="header">
        <div class="user-info">
            <div class="usr">
                <span class="name">回显公众号名称</span>
                <i class="triangle"></i>
                <ul class="drop">
                    <li>
                        <a class="edi_data" href="javascript:;">
                            <span class="text">编辑当前账号资料</span>
                        </a>
                    </li>
                    <li>
                        <a class="man_gzh" href="javascript:;">
                            <span class="text">管理其他公众号</span>
                        </a>
                    </li>
                    <li>
                        <a class="return_sys" href="javascript:;">
                            <span class="text">返回系统</span>
                        </a>
                    </li>
                </ul>
            </div>
        </div>
    </div>
    <!-- 左侧菜单 -->
    <div class="sideBar">
        <a class="logo" href="javascript:;">
            <img src="img/logo.png">
        </a>
        <ul>
            <li class="barList">
                <a class="pic act clearfix" href="javascript:;">
                    <span class="icon"></span>
                    <span class="text">知识库</span>
                </a>
                <ul class="show">
                    <li class="twoMenuLi">
                        <a class="pic clearfix" href="zskzl.html">
                            <span class="icon"></span>
                            <span class="text">知识库管理</span>
                        </a>
                    </li>
                    <li class="twoMenuLi">
                        <a class="pic act clearfix" href="gdgl.html">
                            <span class="icon"></span>
                            <span class="text">工单管理</span>
                        </a>
                    </li>
                    <li class="twoMenuLi">
                        <a class="pic clearfix" href="cjwt.html">
                            <span class="icon"></span>
                            <span class="text">常见问题列表</span>
                        </a>
                    </li>
                    <li class="twoMenuLi">
                        <a class="pic clearfix" href="bq.html">
                            <span class="icon"></span>
                            <span class="text">标签列表</span>
                        </a>
                    </li>
                </ul>
            </li>
            <li class="barList">
                <a class="pic clearfix" href="yggl.html">
                    <span class="icon"></span>
                    <span class="text">员工管理</span>
                </a>
            </li>
            <li class="barList">
                <a class="pic clearfix" href="setting.html">
                    <span class="icon"></span>
                    <span class="text">设置中心</span>
                </a>
            </li>
        </ul>
    </div>
    <!-- 中间内容 -->
    <div class="mainContent clearfix">
        <div class="center-con clearfix">
            <h2 class="main-ttl">工单管理</h2>
            <div class="main-ctn clearfix">
                <div class="col-sm-12 pad0">
                    <div class="col-sm-3 pad0">
                        <div class="mr30" style="border:1px solid #ddd;overflow-y: scroll;min-height: 500px;">
                            <div class="zTreeDemoBackground left">
                                <ul id="treeDemo" class="ztree"></ul>
                            </div>
                        </div>
                    </div>
                    <div class="col-sm-9 pad0">
                        <div class="item clearfix">
                            <input type="text" class="input-text" name="_q" placeholder="请输入单号/客户名">
                            <button type="button" class="Btn ml10" id="search">搜索</button>
                        </div>
                        <div class="item clearfix">
                            <span>创建时间</span>
                            <input type="text" class="Wdate input-text" id="d4321" onclick="WdatePicker({maxDate:'#F{$dp.$D(\'d4322\');}'})"/>
                            &nbsp;<span>至</span>&nbsp;
                            <input type="text" class="Wdate input-text" id="d4322" onclick="WdatePicker({minDate:'#F{$dp.$D(\'d4321\');}'})"/>
                            <button type="button" class="Btn ml10" id="clear">清除</button>
                            <button type="button" class="Btn ml10" id="sx">筛选</button>
                        </div>
                        <div class="gdgl-tab clearfix">
                            <ul class="clearfix">
                                <li class="active">待处理</li>
                                <li>已解决</li>
                            </ul>
                        </div>
                        <table class="user-tb">
                            <tbody>
                                <tr class="tb-hd">
                                    <th>单号</th>
                                    <th>客户名称</th>
                                    <th>回复次数</th>
                                    <th>
                                        <div class="s_div">创建时间</div>
                                        <div class="s_div">
                                            <span class="s_top"></span><br>
                                            <span class="s_bot"></span>
                                        </div>
                                    </th>
                                    <th>
                                        <div class="s_div">最近回复日期</div>
                                        <div class="s_div">
                                            <span class="s_top"></span><br>
                                            <span class="s_bot"></span>
                                        </div>
                                    </th>
                                    <th>客户状态</th>
                                    <th>工单状态</th>
                                    <th>操作</th>
                                </tr>
                                <tr class="tb-ctn">
                                    <td>452</td>
                                    <td>1</td>
                                    <td>1</td>
                                    <td>1</td>
                                    <td>1</td>
                                    <td>1</td>
                                    <td>1</td>
                                    <td>
                                        <a href="javascript:;" class="mr5 checkDes">查看详情&or;</a>
                                        <a class="delete" data-url="123" data-rel="0">删除</a>
                                    </td>
                                </tr>
                                <tr class="td_details">
                                    <td colspan="8">
                                        <div class="gd-title">工单分类：售前-社群&nbsp;&nbsp;&nbsp;&nbsp;<span>客户状态：选择已解决</span></div>
                                        <ul class="clearfix">
                                            <li class="clearfix">
                                                <div class="gd-pic"><img src="img/ava.png" alt=""></div>
                                                <div class="gd-info">
                                                    <div class="wechat-name">快乐的鸟仔</div>
                                                    <div class="gd-modal">选择已解决</div>
                                                    <div class="gd-time">2017-08-06 16:00</div>
                                                </div>
                                            </li>
                                            <li class="clearfix">
                                                <div class="gd-revert">回复：</div>
                                                <div class="gd-pic"><img src="img/ava.png" alt=""></div>
                                                <div class="gd-info">
                                                    <div class="wechat-name">快乐的鸟仔</div>
                                                    <div class="gd-modal">选择已解决</div>
                                                    <div class="gd-time">2017-08-06 16:00</div>
                                                </div>
                                            </li>
                                        </ul>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                        <div class="tb-pager clearfix">
                            <span class="pager-total">共4条数据</span>
                            <span class="pager-txt">每页显示：</span>
                            <select class="pager-select">
                                <option>5</option>
                                <option>10</option>
                                <option>20</option>
                            </select>
                            <ul class="m-pager">
                                <li class="first"><a>首页</a></li>
                                <li class="prev active"><span>上一页</span></li>
                                <li class="num active"><a>1</a></li>
                                <li class="num"><span>2</span></li>
                                <li class="next"><a>下一页</a></li>
                                <li class="last"><a>尾页</a></li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- 弹出框 -->
    <div class="m-modal">
        <div class="sure-modal tip">
            <div class="modal-hd">
                <a class="close">
                    <i></i>
                </a>
                <h3>提示</h3>
            </div>
            <div class="tip-text">确认要删除吗</div>
            <div class="modal-ft clearfix">
                <a href="" class="btn sure">确定</a>
                <span class="btn cancel">取消</span>
            </div>
        </div>
        <div class="tip-modal tip">
            <div class="modal-hd">
                <a class="close">
                    <i></i>
                </a>
                <h3>提示</h3>
            </div>
            <div class="tip-text">该目录下有其他数据关联，请取消关联后再删除。</div>
            <div class="modal-ft">
                <span class="btn get-tip">知道了</span>
            </div>
        </div>
    </div>
    <!-- 底部内容 -->
    <div class="footerContent clearfix navbar-fixed-bottom">
Copyright@2012-2016 ibona.cn　All Right Reserved. 粤ICP备 14099207号-4 版权所有@深圳博纳移动信息技术有限公司 | 咨询热线：40007 22217 　公司总部：深圳福田区金地工业园127栋2层
    </div>
<script>
$(function(){
    //tab切换
    $('.gdgl-tab ul li').on('click',function(){
        $(this).addClass('active').siblings().removeClass('active')
    })
    //显示隐藏tr详情
    $('body').on('click','.checkDes',function(){
        $(this).parents('tr').next('.td_details').slideToggle()
    })
    //清除按钮
    $('#clear').on('click',function(){
        $('.Wdate').val('')
    })
})
</script>
</body>
</html>